<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

<script>
// `...` 运算符，  “展开运算符”
const arr1 = [1,2,33, 3], arr2 = ['a', 'b', 'c'];
const arr = [...arr1, ...arr2];

// console.log(arr1.concat(arr2), arr);

// 展开运算符 - 数组相关的 总结：
  // 1) 数组的 ...运算符， 在新的数组中 通过 ...另外的数组，将另外数组的 items， 放到 新的数组中。
    // 作用：方便地进行 多个 数组的 拼接。
  // 2）在函数的实参位置，也可以使用 ...运算符，将数组中每个 item，依次作为 实参
    // 作用：eg1: Math.max(...arr1)


// 展开运算符 - 函数参数 相关的 总结：
  // 即为 数组展开运算符 的“反向操作”
function sum(...args) { // 是 arguments 的简写 - args
  console.log(args);  
}

// sum(1, 2, 3, 4); // -> [1, 2, 3, 4];


// 展开运算符 - 对象相关的总结：
const animal = {
  heart: 1
}
const person = {
  legNumber: 2,
  head: 1,
  nose: 1,
  eyes: 2
};

const zhaojun = {
  ...animal, // 动物 共有的基础数据
  ...person, // 人类 共有的基础数据
  name: 'xxx',
  height: '165cm',
  eyes: 1 // 后面的属性值，会 覆盖 前面 展开运算符 展开的对象的属性值
};
console.log(zhaojun);

// 总结：对象展开运算符 最大的作用： 实现了 对象 的 「继承」。


// ------------ 总结：
  // 但凡 变量存在 [Symbol.iterator] 即该变量类型，可以使用 ... 运算符
</script>